<template>
  <div>
    <div id="top-status-detailRecord">
      <span class="time" style="float: left">{{time}}</span>
      <img src="@/assets/电 90%.png"
           style="float: right; width: 30px; height: 30px; margin-top: -6px; margin-right: 30px;">
      <img src="@/assets/280-手机网络.png"
           style="float: right; width: 19px; height: 19px; margin-top: -1px; margin-right: 6px;">
      <img src="@/assets/手机信号.png"
           style="float: right; width: 15px; height: 15px; margin-top: 1px; margin-right: 13px;">
    </div>
    <div id="bottom">
      <div style="width: 100%; height: 40px; background-color: #FFFFFF; margin-top: 50px;">
        <img src="../../../assets/向左箭头(灰).png" style="width: 25px; height: 25px; float: left;margin: 6px 0 0 15px" @click="gowithdrawalRecord">
        <p style="float: left; margin: 7px 0 0 120px;font-weight: bolder;font-size : 13pt;">提现详情</p>
      </div>
      <div style="width: 100%; height: 300px; background-color: #FFFFFF;margin-top: 8px" :value="form">
        <p style="font-size: 14pt;font-weight: bolder;float: left; width: 100%; text-align: left;margin-left: 20px">提现
          <span style="color: #4FA5FF">{{form.withdrawalAmount}}元</span></p>
        <p style="float: left;margin: 12px 0 0 18px;font-weight: bolder;font-size : 12pt;
        width: 100%; text-align: left">申请时间</p>

        <p style="color: #B1BCC0;float: left;margin: 10px 0 0 18px;
        width: 100%; text-align: left">{{ form.applicationTime | formatDateTime }}</p>

        <p style="float: left;margin: 12px 0 0 18px;font-weight: bolder;font-size : 12pt;
        width: 100%; text-align: left">提现金额</p>

        <p style="color: #B1BCC0;float: left;margin: 10px 0 0 18px;
        width: 100%; text-align: left">{{ form.withdrawalAmount }}元</p>

        <p style="float: left;margin: 12px 0 0 18px;font-weight: bolder;font-size : 12pt;
        width: 100%; text-align: left">提现通道</p>

<!--        <div style="width: 100%; height: 100px;float: left">-->
<!--          <ul style="width: 100%;height: 100px;float: left; margin: 18px 0 0 25px">-->
<!--            <li style="width: 60px; height: 60px; float: left">-->
<!--              <img :src="userPurses.bankIcon"-->
<!--                   alt="网络异常" style="width: 50px;height: 50px;float: left;margin-top: 5px;margin-left: 5px">-->
<!--            </li>-->
<!--            <p-->
<!--                style="width: 118px;height: 20px;float: left;margin: 18px 0 0 10px;font-size: 13pt;text-align: left">{{userPurses-->
<!--                .bankName}}</p>-->
<!--          </ul>-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import {findByIdCountMoney} from "@/components/api/user/user";
import Vue from 'vue';
import {Tab, Tabs} from 'vant';
import { Rate } from 'vant';

import moment from 'moment';

// 在Vue组件中定义过滤器
Vue.filter('formatDateTime', function(value) {
  if (value) {
    return moment(String(value)).format('YYYY/MM/DD HH:mm');
  }
});

Vue.use(Rate);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  components: {
  },
  data() {
    return {
      time: '',
      value: true,
      value1: true,
      value2: true,
      dialogVisible: false,
      value3: null,
      colors: ['#5FB0CF', '#5FB0CF', '#5FB0CF'],
      form:[],
      find:{
        id: '',
        attId:''
      }
    };
  },
  methods: {
    listDara(){
      this.find.id=JSON.parse(localStorage.getItem('countMoney'));
      this.find.attId=JSON.parse(localStorage.getItem('login'));
      console.log(this.find)
      findByIdCountMoney(this.find).then(response => {
        console.log(response)
        this.form=response;
      })
    },
    format(percentage) {
      return percentage === 100 ? ' ' : ` `;
    },
    updateTime() {
      setInterval(() => {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        this.time = timeString;
      }, 1000);
    },
    // 模拟信号、网络、电量状态数据
    setSignalStatus() {
      const signalStatus = 'full';  // 例如 'full','medium', 'low'

      // 根据状态设置相应的图标样式或显示不同的图标
      if (signalStatus === 'full') {
        // 设置信号满格的样式
      } else if (signalStatus ==='medium') {
        // 设置信号中等的样式
      } else {
        // 设置信号低的样式
      }
    },
    gowithdrawalRecord(){
      this.$router.push("/withdrawalRecord")
    }
  },
  created() {
    this.listDara();
    this.updateTime();
    this.setSignalStatus();
  }
};
</script>
<style>
#top-status-detailRecord {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #F8F8F8;
  padding: 10px;
  font-weight: bolder;
  color: #171010;
  padding-top: 15px;
  float: left;
}
#bottom{
  width: 100%;
  height: 798px;
  float: left;
  margin-top: 10px;
  background-color: #F8F8F8;
}
</style>